// 构造game类
function Game(node) {
  this.node = node
  this.con = this.node.firstElementChild;
  this.height = this.node.offsetHeight;
  this.score = 0;
  this.speed = 2;
   this.delrow()

}

// 游戏开始初始化
Game.prototype.gameGo = function () {
  this.render()
  this.move()
}

// 载入
Game.prototype.render = function () {
  // 加载最初的格子
  for (let i = 0; i < 5; i++) {
    this.creatRow()
  }
}

// 创建Row
Game.prototype.creatRow = function () {
  let div = document.createElement('div');
  div.className = 'row';
  div.append(this.creatDiv())
  this.con.prepend(div)
}

// 创建div
Game.prototype.creatDiv = function () {
  let fragment = new DocumentFragment;
  let black = Math.floor(Math.random() * 4)
  for (let i = 0; i < 4; i++) {
    let div = document.createElement('div')
    div.className = 'cell';
    if (black === i) {
      div.className = 'cell black';
    }
    fragment.append(div)
  }
  return fragment;
}

// 向下滑动
Game.prototype.move = function () {

  this.timer = setInterval(function () {
    let top = parseInt(window.getComputedStyle(this.con, null)["top"]);
    top += this.speed;
    if (top >= 0) {
      this.over()
      return;
    }
    this.con.style.top = `${top}px`;
  }.bind(this), 20)
}

// 删除节点
Game.prototype.delrow = function () {
  this.node.addEventListener('click', function (e) {
    let target = e.target;
    if (target.classList.contains('black')) {
      //删除节点
      this.removeNode(target)
      // 计分
      this.addScore();
      // 加速
      this.speedUp();
    }else if (target.className === 'cell') {
      // 点到了白块
      this.over(true)
    }
  }.bind(this), false)
}

// 删除节点
Game.prototype.removeNode = function (target) {
  target.classList.remove('black')
  this.moveByTop()
  this.creatRow()
  this.removeRow(target)
}

// 删除已经滑动至屏幕下方的节点
Game.prototype.removeRow = function () {
  let row = this.con.lastElementChild;
  let len = this.con.children.length;
  if (len > 11) {
    row.remove()
  }
}

// 调整删除节点后con的位置
Game.prototype.moveByTop = function () {
  let top = parseInt(window.getComputedStyle(this.con, null)["top"]);
  let oneRowHeight = parseInt(this.height / 5);
  this.con.style.top = top - oneRowHeight + 'px';
}

// 积分函数
Game.prototype.addScore = function () {
  this.score++
  let score = document.getElementById('score');
  score.textContent = this.score;
}

// 加速函数
Game.prototype.speedUp = function () {
  let newSpedd = this.score;
  if ((newSpedd >= 5) && (newSpedd % 5 === 0)) {
    this.speed++;
  }
}

// 游戏结束
// flag表示失败的方式 ture表示点到了白块，false表示黑块触底
Game.prototype.over = function (flag = false) {
  clearInterval(this.timer)
  if (flag) {
    alert('你踩到了白块')
  } else {
    alert('you lose I winner')
  }
  alert('你的得分是' + this.score)
  this.con.innerHTML = '';
  let score = document.getElementById('score');
  score.textContent = 0;
  this.con.style.top = '-100%'
  this.speed = 2;
  this.score = 0;
}

let game = new Game(document.getElementById('main'))
function start() { 
  game.gameGo()
}